// ImageUploadView
// author Vicent
// 图片上传控件，选择本地图片后会在屏幕上有预览，点击图片删除当前图片
define(['require', './BaseView'], function(require, BaseView) {
    var _this = null;
    return BaseView.extend({
        type: 'ImageUploadView',

        defaults:{
            max: 3,
            min: 0,
            label: '上传图片',
            layout: 'vertical'
        },

        events: {
            "click img": "imgClick"
        },

        input: null,
        preview: null,
        uploadView: null,
        contentView: null,
        imgArray: [],

        initialize: function() {
            _this = this;
            this.input = $('<input class="input-image-upload" type="file" id="Files" name="files[]" accept="image/*" multiple />');
            //绑定事件
            this.input.bind("change", this.handleFiles);
            this.preview = $('<div class="image-preview" />');
            var addView = $("<div class='image-upload'>+</div>")
            this.uploadView = $("<div class='image-add' ></div>");
            this.contentView = $("<div class='image-upload-content'></div>");
            this.uploadView.append(addView);
            this.uploadView.append(this.input);
            this.contentView.append(this.preview).append(this.uploadView);
            Array.prototype.remove = function(val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };
        },

        remove: function() {
            //解绑
            this.input.unbind("change", this.handleFiles);
            this.$el.remove();
        },

        render: function() {
            this.$el.empty();
            var rootView = $("<div class='image-upload-view'></div>");
            var $label = $('<label></label>');
            if(this.options.label){
                $label.text(this.options.label);
                rootView.append($label);
            }

            if(this.options.layout != "vertical"){
                // 水平布局的表单
                rootView.addClass('label-inline');
            } else if(this.options.layout == "vertical"){
                // 垂直布局的表单
                rootView.addClass('label-block');
            }

            if(!this.options.label) {
                rootView.addClass('label-none');
            }

            //rootView.append(this.preview).append(this.uploadView);
            rootView.append(this.contentView);
            this.$el.append(rootView);

            return this;
        },

        imagefiles:[],
        handleFiles: function() {
            var files = _this.input[0].files;
            var output = [];

            for (var i = 0, f; f = files[i]; i++) {
                var imageType = /image.*/;

                if (!f.type.match(imageType)) {
                    continue;
                }
                var _id = Math.random()*new Date();
                _this.imagefiles.push({_id:_id,file:f});
                var reader = new FileReader();
                reader.onload = function(e) {
                    var imgData = e.target.result;
                    _this.addImage(imgData,_id);
                }
                reader.readAsDataURL(f);
                if(_this.imgArray.length >= _this.options.max-1){
                    _this.hideAdd();
                    return;
                }
            }
        },

        addImage: function(imgData,_id){
            var img = $('<img />');
            img.attr('src', imgData);
            img.attr('_id', _id);
            this.imgArray.push(imgData);
            this.preview.append(img);
        },

        imgClick: function(e) {
            var data = $(e.currentTarget).attr('src').toString();
            var _id = $(e.currentTarget).attr('_id').toString();
            this.imgArray.remove(data);
            this.imagefiles=this.imagefiles.filter(function(it,i,arr){
                return it._id!=_id;
            });
            e.currentTarget.remove();
            this.input.val('');
            if(this.imgArray.length < this.options.max){
                this.showAdd();
                return;
            }
        },

        hideAdd: function(){
            this.uploadView.css({
                display:'none'
            });
        },
        showAdd: function(){
            this.uploadView.css({
                display:'block'
            });
        },

        getValue: function(){
            var files=[];
            this.imagefiles.forEach(function(it,index,a){
                files[index]=it.file;
            });
            return files;
        }
    });
});
